<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>龟兔赛跑</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        font-family: "华文楷体";
        position: relative;
    }

    #box1 {
        margin-top: 100px;
        border: black 1px solid;
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        left: 0;
    }

    #box2 {
        margin-top: 160px;
        border: black 1px solid;
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        left: 0;
    }

    #btn {
        position: absolute;
        left: 50px;
        top: 300px;
    }

    button {
        font-size: 20px;
        margin-left: 50px;
        width: 100px;
        height: 40px;
        background-color: #b3b1af;
        border: none;
        border-radius: 10%;
        box-shadow: black 0 0 5px;
        transition: linear 0.2s;
        z-index: 1;
        text-align: center;
    }

    button:hover {
        background-color: pink;
        transform: scale(1.1);
        color: deeppink;
    }

    #linear {
        width: 0;
        height: 400px;
        border-left: black 1px solid;
        position: absolute;
        top: 0;
        left: 700px;
    }

</style>
<body>
<div id="box">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="linear"></div>
    <div id="btn">
        <button id="btn1">b1-向左</button>
        <button id="btn2">b1-向右</button>
        <button id="btn3">b2-移动</button>
        <button id="btn4">b2-移动</button>
    </div>
</div>

<script>
    // 点击按钮的移动方向函数
    function move(obj, btn, speed, num, ty,callback) {
        let button = document.getElementById(btn)
        let box = document.getElementById(obj)
        button.addEventListener("click", function () {
            // 每次点击按钮1时，都清除原来的计时器，防止计时器叠加
            clearInterval(box.time)
            // 定时器
            box.time = setInterval(function () {
                // 调用获取样式的函数
                let box1Left = getStyle(obj, ty)
                let linearLeft = getStyle("linear", "offsetLeft")
                let box1Width = getStyle(obj, "offsetWidth")
                // 每次循环+speed
                let new_box1Left = box1Left + speed
                // 如果传来的参数是offsetLeft就执行里面的语句,防止box溢出右边线
                if (ty === "offsetLeft") {
                    // 如果循环+了speed的值大于linearLeft-box1Width就把linearLeft-box1Width给box1
                    if (speed > 0 && new_box1Left > linearLeft - box1Width) {
                        new_box1Left = linearLeft - box1Width
                    }
                } else {
                    if (ty==="offsetTop"){
                        box.style.marginTop="0"
                    }
                    if (speed > 0 && new_box1Left > linearLeft) {
                        new_box1Left = linearLeft
                    }
                }
                // 判断是否出左边界
                if (speed < 0 && new_box1Left < num) {
                    new_box1Left = num
                }
                // 去除前面六个字母
                let Style = ty.substring(6);
                // 将剩余字符串转换为小写
                let style = Style.toLowerCase();
                box.style[style] = new_box1Left + "px"
                if (ty==="offsetLeft"){
                    // 如果box1右边框和linearLeft相等就清除计时器
                    if (new_box1Left === linearLeft - box1Width) {
                        clearInterval(box.time)
                    }
                }
                if (new_box1Left===linearLeft){
                    clearInterval(box.time)
                    callback()
                }

            }, 200)
        })
    }

    // 获取样式的函数
    function getStyle(box, style) {
        let box1 = document.getElementById(box)
        return box1[style]
    }

    // move(div,button，speed,num)
    move("box1", "btn1", -60, 0, "offsetLeft")
    move("box1", "btn2", 60, 0, "offsetLeft")
    move("box2", "btn3", 60, 0, "offsetWidth",function (){
        return 0
    })
    move("box2", "btn4", 60, 0, "offsetWidth",function (){
        move("box2", "btn4", 10, 0, "offsetHeight",function (){
            move("box2", "btn4", 10, 0, "offsetTop",function (){
                return 0
            })
        })
    })
</script>
</body>
</html>
